<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="./lib/vue-2.4.0.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- 三个组件实例不应该共享一个data数据 -->
      <counter></counter>
      <hr />
      <counter></counter>
      <hr />
      <counter></counter>
      <hr />
      <counter></counter>
    </div>

    <template id="templ">
      <div>
        <input type="button" value="+1" @click="add" />
        <h1>{{ count }}</h1>
      </div>
    </template>

    <script type="text/javascript">
      var dataObj = { count: 0 };

      Vue.component("counter", {
        template: "#templ",
        // 每次在页面通过<counter></counter>创建新的组件实例
        // 就会调用一下data函数开辟新空间 return 新开辟的对象 保证每一个组件实例之间data数据都是独有的 不共享
        // 所以data必须是一个函数 且返回对象
        data: function() {
          return {
            count: 0
          };

          // return dataObj; // 引用次个count组件 内部返回的对象指向了同一个对象
        },
        methods: {
          add() {
            this.count++;
          }
        }
      });

      // 创建 Vue实例，得到 ViewModel
      var vm = new Vue({
        el: "#app",
        data: {},
        methods: {}
      });
    </script>
  </body>
</html>
